<template>
  <div>
    <h1 class="title">详细配置</h1>
    <div class="status-conf">
      <h2 class="title status-title">配置</h2>
      <ul class="conf-box">
        <template v-for="item in statusData">
          <li v-if="item.show(data)" :key="item.label" class="conf-list">
            <div class="conf-logo">
              <div class="conf-logo_box">
                <img :src="item.img" alt="">
              </div>
            </div>
            <div class="conf-text">
              <p class="label">{{ item.label }}</p>
              <p class="dsc">
                {{ item.dsc }}
                <span v-if="item.tips" style="font-weight: 600">{{
                  item.tips
                }}</span>
              </p>
            </div>
            <div class="conf-status">
              <el-switch
                v-model="data[item.key]"
                @change="(v) => handleSwitch(item, v)"
              />
            </div>
          </li>
        </template>
      </ul>
    </div>
    <!-- 字段映射 -->
    <Type v-if="data.typeStatus" :data="data" />
    <!-- 批量同步配置 -->
    <Batch v-if="data.batchStatus" :data="data" />
    <!-- 同步配置 -->
    <Sync v-if="data.syncStatus" :data="data" />
    <!-- 映射关系配置 -->
    <Mapping v-if="data.mappingStatus" :data="data" />
    <!-- 任务调度 -->
    <Monitor
      v-if="data.monitorStatus"
      dicts="synchronous_tasktype"
      :data="data"
      job-id="6"
    />

    <el-dialog title="提示" :visible.sync="switchVisible" width="30%">
      <span>关闭将清空配置参数</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleSwitchCancel">取 消</el-button>
        <el-button type="primary" @click="handleRemoveConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { stepFourStatus } from './index'
import Monitor from './fourComponents/monitor.vue'
import Type from './fourComponents/type.vue'
import Batch from './fourComponents/batch.vue'
import Sync from './fourComponents/sync.vue'
import Mapping from './fourComponents/mapping.vue'
import Vue from 'vue'

export default {
  components: { Monitor, Type, Batch, Sync, Mapping },
  props: ['data'],
  data: function() {
    return {
      statusData: [],
      switchVisible: false,
      removeData: {}
    }
  },
  created() {
    console.log(this.$props.data, '8888')
    this.statusData = stepFourStatus
  },
  methods: {
    handleSwitch(item, v) {
      if (!v) {
        this.switchVisible = true
        this.removeData = item
      }
    },
    handleRemoveConfirm() {
      this.removeData.confName.forEach((f) => {
        Vue.set(this.$props.data, f, null)
      })
      this.switchVisible = false
    },
    handleSwitchCancel() {
      this.switchVisible = false
      this.$props.data[this.removeData.key] = true
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  font-family: alimama, webfont-notdef;
}
.title {
  color: #333;
  font-size: 24px;
  line-height: 1.25;
  box-sizing: border-box;
  font-weight: 600;
  margin: 25px 0;
  text-align: left;
}

.status-conf {
  .status-title {
    font-size: 18px;
  }
}

.conf-box {
  list-style-type: none;
  width: 100%;
  height: 100%;
  padding: 0;
  .conf-list {
    display: flex;
    margin-bottom: 15px;
    justify-content: space-around;
    .conf-logo {
      width: 55px;
      display: flex;
      align-items: center;
      .conf-logo_box {
        width: 50px;
        height: 50px;
        background-color: rgb(232, 238, 242);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 60%;
          height: 60%;
        }
      }
    }

    .conf-text {
      width: 75%;
      p {
        margin: 0;
        padding: 0%;
      }

      .label {
        font-weight: 600;
      }

      .dsc {
        font-weight: 400;
        margin: 5px 0;
        font-size: 14px;
        color: #333;
        letter-spacing: 1px;
      }
    }

    .conf-status {
      display: flex;
      align-items: center;
      width: 15%;
      margin-left: 15px;
    }
  }
}
</style>
